<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="12">
        <div class="login-box">
          <h3>用户登录</h3>
          <el-form
            status-icon
            class="demo-ruleForm"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
          >
            <el-form-item prop="username">
              <el-input
                type="text"
                placeholder="请输入用户名"
                autocomplete="off"
                v-model="ruleForm.username"
                ><i slot="prefix" class="el-input__icon el-icon-user-solid"></i
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                placeholder="请输入密码"
                autocomplete="off"
                v-model="ruleForm.password"
                ><i slot="prefix" class="el-input__icon el-icon-help"></i
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      ruleForm: { username: "", password: "" },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ...mapActions(["getLogin"]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        //数据校验的方法
        const loading = this.$loading({
          lock: true,
          text: "登录中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        if (valid) {
          // alert("submit!");
          //发请求跳转页面
          this.getLogin(this.ruleForm); //同步函数
          if(localStorage.token){
            this.$router.replace("/index/echart");
          }
          
        } else {
          this.$message.error("请正确填写");
        }
        loading.close();
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style>
.login-box {
  padding: 20px 40px;
  background-color: #a6a0a080;
}
.login-box h3 {
  text-align: center;
}
</style>